<template>
  <form-editor ref="formEditorRef" :remote="getFormConf" model-key-type="pinyin">
    <template #logo>流程表单</template>
    <template #after-components>
      <!-- 左边：动态表单 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="padding: 8px">
        <el-form-item label="表单名" prop="name">
          <el-input v-model="form.name" placeholder="请输入表单名" />
        </el-form-item>
        <el-form-item label="流程分类" prop="category">
          <el-select v-model="form.category" placeholder="请选择流程分类" clearable style="width: 100%">
            <el-option v-for="dict in categoryDictDatas" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="开启状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio v-for="dict in getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="dict.value"
              :label="parseInt(dict.value)">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
    </template>

    <template #action><el-button icon="el-icon-check" type="text"
        @click="save">保存</el-button></template>
  </form-editor>
</template>

<script>
import Vue from 'vue';
import { FormEditor } from 'un-low-code-form-generator';
import { CommonStatusEnum } from '@/utils/constants';
import { createForm, getForm, updateForm } from '@/api/bpm/form';
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import UnFlowUser from '@/components/generator/form-extention/un-flow-user';
import UnFlowUserSetter from '@/components/generator/form-extention/un-flow-user/Setter.vue';
import { unFlowUserConfig } from '@/components/generator/form-extention/un-flow-user/config';

Vue.component('un-flow-user', UnFlowUser);
Vue.component('un-flow-user-setter', UnFlowUserSetter);

export default {
  name: 'FormBuild',
  components: {
    FormEditor,
  },
  data() {
    return {
      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY), //流程分类可选数据

      // 表单参数
      form: {
        status: CommonStatusEnum.ENABLE,
        category: "1",
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
        category: [
          { required: true, message: "表单类别不能为空", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.$refs.formEditorRef && this.$refs.formEditorRef.registryComponent(unFlowUserConfig, { title: '其他', type: 'other' })
  },

  methods: {
    getFormConf(callback) {
      const formId = this.$route.query && this.$route.query.formId;
      if (formId) {
        getForm(formId).then((response) => {
          const data = response.data;
          this.form = {
            id: data.id,
            name: data.name,
            status: data.status,
            remark: data.remark,
            category: data.category,
          };
          // 传递给生成器
          callback(data.conf, data.fields);
        });
      } else {
        // 新增，清空 keepAlive 缓存。不传值即可清空
        callback();
      }
    },
    save() {
      if (this.$refs.formEditorRef.hasSameKey()) {
        this.$message.error('字段名不能重复');
        return;
      }
      // this.AssembleFormData()
      // console.log(this.formData)
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return;
        }
        const formConf = this.$refs.formEditorRef.getCurrFormConf() || {};
        // 获取当前编辑区域内的组件列表，将数据序列化JSON字符串
        const drawingList = this.$refs.formEditorRef.getCurrDrawingList((item) => JSON.stringify(item)) || [];
        const form = {
          conf: JSON.stringify(formConf), // 表单配置
          fields: drawingList, // 表单项的数组
          ...this.form, // 表单名等
        };
        // 修改的提交
        if (this.form.id != null) {
          updateForm(form).then((response) => {
            this.$modal.msgSuccess('修改成功');
            this.close();
          });
          return;
        }
        // 添加的提交
        createForm(form).then((response) => {
          this.$modal.msgSuccess('新增成功');
          this.close();
        });
      });
    },
    /** 关闭按钮 */
    close() {
      this.$tab.closeOpenPage({ path: '/bpm/manager/form' });
    },
  },
};
</script>

<style lang="scss">
@import 'un-low-code-form-generator/dist/style.css';
</style>
